<template>
  <el-dialog
    v-model="open" title="锁场修改" width="1000px" append-to-body :close-on-click-modal="false"
    @close="cancel"
  >
    <el-form ref="lockFieldRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="选择场地" prop="siteList">
        <el-select v-model="form.siteIdArr" multiple>
          <el-option v-for="site in siteList" :key="site.id" :label="site.name" :value="site.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间段" prop="blockType">
        <div>
          <el-radio v-model="form.blockType" label="0">全天</el-radio>
          <el-radio v-model="form.blockType" label="1">固定时间段</el-radio>
          <el-radio v-if="!istype2" v-model="form.blockType" label="2">日期时间</el-radio>
        </div>
      </el-form-item>
      <el-form-item v-if="form.blockType=='2'" label="开始日期" prop="orderDateStart">
        <el-date-picker
          v-model="form.orderDateStart" type="date" value-format="YYYY-MM-DD"
        />
        <el-time-select
          v-model="form.orderTimeStart"
          placeholder="00:00" format="HH:mm"
          start="00:00"
          end="23:30"
        />
      </el-form-item>
      <el-form-item v-if="form.blockType=='2'" label="结束日期" prop="orderDateEnd">
        <el-date-picker
          v-model="form.orderDateEnd" type="date" value-format="YYYY-MM-DD"
        />
        <el-time-select
          v-model="form.orderTimeEnd"
          placeholder="00:00" format="HH:mm"
          start="00:00"
          end="23:30"
        />
      </el-form-item>

      <el-form-item v-if="form.blockType!='2'" label="日期" prop="orderDateRange">
        <el-date-picker
          v-if="istype2"
          v-model="form.orderDate" value-format="YYYY-MM-DD" type="date"
        />
        <el-date-picker
          v-else
          v-model="form.orderDateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item v-if="form.blockType=='1'">
        <el-time-select
          v-model="form.orderTimeStart"
          :max-time="form.orderTimeEnd"
          class="mr-4"
          placeholder="00:00"
          :start="venStore.businessPeriod[0]"
          :end="venStore.businessPeriod[1]"
        />
        至
        <el-time-select
          v-model="form.orderTimeEnd"
          :min-time="form.orderTimeStart"
          class="mr-4"
          placeholder="00:00"
          :start="venStore.businessPeriod[0]"
          :end="venStore.businessPeriod[1]"
        />
      </el-form-item>
      <el-form-item label="订单备注">
        <el-input v-model="form.remark" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">锁场</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { computed } from '@vue/reactivity'
import useVenStore from '@/store/modules/ven'
import { toRefs } from '@vueuse/shared'
import { getSiteList } from '@/api/ven'
import { blockSiteEdit } from '@/api/ven/reserve'
import { watch } from 'vue'


const { proxy } = getCurrentInstance()
const emit = defineEmits(['submitForm'])
const venStore = useVenStore()

// const projectList = computed(() => venStore.projectList)
const props = defineProps({
  props: {
    type: Object,
    default: () => ({
      open: false,
      data: {}
    })
  }
})
const formBase = {
  blockType: '0', // 0 全天预约 1 时间段预约
  siteIdArr: [],
  orderDateRange: []
}
const data = reactive({
  form: {
    ...formBase
  },
  siteList: [],
  istype2: false,
  rules: {
    siteIdArr: { required: true, message: '必填', trigger: 'change' },
    orderDateRange: { required: true, message: '必填', trigger: 'change' },
    blockType: {
      validator: (rule, value, callback) => {
        if (value === '1') {
          if (!form.value.orderTimeStart || !form.value.orderTimeEnd) {
            callback('必填')
            return
          }
        }
        callback()
      }, trigger: 'change' }
  }
})
const { form, rules, siteList, istype2 } = toRefs(data)

const { open } = toRefs(props.props)

watch(open, (val) => {
  if (val) {
    console.log(props.props)

    form.value.orderId = props.props.data.id
    form.value.blockType = props.props.data.blockType
    getSiteList().then(res => {
      siteList.value = res.rows
    })
    // parentType == 2 不能选取时间段
    if (props.props.data.parentType == '2') {
      istype2.value = true
    } else {
      istype2.value = false
    }

    if (props.props.data.sonList && props.props.data.sonList.length > 0) {
      form.value.siteIdArr = []
      form.value.orderDateRange = []
      const orderHourArr = []
      let orderStartTimeArr = []
      let orderEndTimeArr = []

      for (var s of props.props.data.sonList) {
        form.value.siteIdArr.push(s.siteId)
        form.value.orderDateRange.push(s.orderDate)
        orderHourArr.push(s.orderHour)
        orderStartTimeArr = _.concat(orderStartTimeArr, s.orderTimePeriod.split(',')[0])
        orderEndTimeArr = _.concat(orderEndTimeArr, s.orderTimePeriod.split(',')[1])
      }


      form.value.siteIdArr = _.uniq(form.value.siteIdArr)
      form.value.orderDateRange = _.chain(form.value.orderDateRange).uniq().sortBy().value()
      if(form.value.orderDateRange.length<2){
        form.value.orderDateRange[1] = form.value.orderDateRange[0]
      }
      console.log(orderStartTimeArr, orderEndTimeArr)
      orderStartTimeArr = _.chain(orderStartTimeArr).uniq().pull('00:00').value()
      orderEndTimeArr = _.chain(orderEndTimeArr).uniq().pull('24:00').value()
      if (form.value.blockType == '1') {
        form.value.orderTimeStart = s.orderTimePeriod.split(',')[0]
        form.value.orderTimeEnd = s.orderTimePeriod.split(',')[1]
      }

      if (form.value.blockType == '2') {
        form.value.orderDateStart = form.value.orderDateRange[0]
        form.value.orderDateEnd = _.last(form.value.orderDateRange)
        if (orderStartTimeArr.length > 0) {
          form.value.orderTimeStart = orderStartTimeArr[0]
        } else {
          form.value.orderTimeStart = '00:00'
        }
        if (orderEndTimeArr.length > 0) {
          form.value.orderTimeEnd = orderEndTimeArr[0]
        } else {
          form.value.orderTimeStart = '24:00'
        }
      }
    } else {
      form.value.siteIdArr = []
      form.value.orderDateRange[0] = props.props.data.orderDate
      form.value.orderDateRange[1] = props.props.data.orderDate
      form.value.orderDateStart = form.value.orderDateRange[0]
      form.value.orderDateEnd = form.value.orderDateRange[1]
      form.value.orderTimeStart = props.props.data.orderTimePeriod.split(',')[0]
      form.value.orderTimeEnd = props.props.data.orderTimePeriod.split(',')[1]

      form.value.siteIdArr.push(props.props.data.siteId)
      if (istype2.value) {
        form.value.orderDate = props.props.data.orderDate
      }
    }
  } else {
    proxy.resetForm('lockFieldRef')
  }
})


function submitForm() {
  proxy.$refs['lockFieldRef'].validate((valid) => {
    if (valid) {
      form.value.orderTime = [form.value.orderTimeStart, form.value.orderTimeEnd].join(',')
      if (istype2.value) {
        form.value.orderDate = `${form.value.orderDate},${form.value.orderDate}`
      } else {
        form.value.orderDate = form.value.orderDateRange.join(',')
      }

      if (form.value.blockType == '2') {
        // form.value.orderTimeRange = form.value.orderDateRange.join(',')
        const arr = [form.value.orderDateStart + ' ' + form.value.orderTimeStart, form.value.orderDateEnd + ' ' + form.value.orderTimeEnd]
        form.value.orderTimeRange = arr.join(',')
        delete form.value.orderDate
      }

      form.value.siteIdStr = form.value.siteIdArr.join(',')
      console.log(form.value)
      blockSiteEdit(form.value).then(() => {
        proxy.$modal.msgSuccess('锁场成功')
        open.value = false
        emit('submitForm')
      })
    }
  })
}


function cancel() {
  open.value = false
  form.value = formBase
}

</script>

<style scoped>

</style>
